<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>热力图</title>
    <style>
        #heatNumbers, #heatRadius {
            width: 50px;
            display: inline-block;
        }
    </style>
</head>
<body style=" margin: 0;overflow: hidden;background: #fff;width: 100%;height:100%;position: absolute;top: 0;">
<div id="map" style="margin:0 auto;width: 100%;height: 100%"></div>
<script type="text/javascript" include="leaflet.heat" src="../../dist/include-leaflet.js"></script>
<script type="text/javascript">
    var host = window.isLocal ? document.location.protocol + "//" + document.location.host : "http://support.supermap.com.cn:8090";
    var map, resultLayer,
        url = host+"/iserver/services/map-china400/rest/maps/China";
    map = L.map('map', {
        preferCanvas: true,
        center: [39.89, 116.35],
        maxZoom: 18,
        zoom: 11
    });
    L.supermap.tiledMapLayer(url).addTo(map);
    loadHeatMap();

    function loadHeatMap() {
        var heatNumbers = 150, heatRadius = 30;
        var num = parseInt(heatNumbers);
        num = (num > 0) ? num : 0;
        var radius = parseInt(heatRadius);
        radius = (radius > 0) ? radius : 0;
        var heatPoints = [];
        for (var i = 0; i < num; i++) {
            heatPoints[i] = [Math.random() * 0.28 + 39.78, Math.random() * 0.5 + 116.12, Math.random() * 80];
        }
        resultLayer = L.heatLayer(heatPoints, {
            radius: radius,
            minOpacity: 0.5
        }).addTo(map);
    }
</script>
</body>
</html>